<template>
  <div class="login-page">
    <div class="login-container fr">
      <!--标题头-->
      <div class="title" style="text-align: center">
        <span>找回密码</span>
      </div>
      <!--登录表单-->
      <div class="login-form">
        <ul class="option">
          <li class="active">手机找回</li>
        </ul>
        <!--登录名-->
        <input type="text" id="phone" v-model="form.phone" placeholder="手机号码">
        <div class="change">
          <!--密码-->
          <input type="password" id="password" v-model="form.password" placeholder="新的密码">
          <!--验证码-->
          <div class="vcode clearfix">
            <input type="text" id="code" placeholder="手机验证码" v-model="form.code" class="code-input">
            <!--<img :src="code" width="120" height="44" class="fr" @click="refleshCode">-->
            <input type="button" class="get-code check-code hidden fr" style="display: block" value="获取验证码"/>
          </div>
          <p class="code-error">{{error}}</p>
        </div>
        <button type="submit" class="do-event" id="login-sub" @click="toRetirevePassword">立即找回</button>
        <router-link  to="/login" class="do-event" style="background: #337ab7">返回登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {getCode} from '../../api/user'
export default {
  name: 'RetrievePassword',
  mounted () {
    this.init()
  },
  data () {
    return {
      code: '',
      requestUrl: '',
      form: {
        account: '',
        password: '',
        code: ''
      },
      error: ''
    }
  },
  methods: {
    /**
     * 初始化
     * @returns {Promise<void>}
     */
    init: async function () {
      const promise = await getCode()
      console.log(promise)
      this.code = promise.codeImage
      this.requestUrl = promise.codeUrl
    },
    /**
     * 验证码刷新
     */
    refleshCode: function () {
      this.init()
    },
    /***
     * 获取手机验证码
     * @param ev
     */
    getPhoneCode: function (ev) {
      ev = arguments[0] || event
      let target = ev.target || ev.srcElement
      let countdown = 60 // 倒计时
      let time = setInterval(() => {
        target.value = countdown + '秒后失效'
        if (countdown <= 0) {
          clearInterval(time)
          target.value = '获取验证码'
        }
        countdown--
      }, 1000)
    },
    /***
     * 找回密码
     * @param ev
     */
    toRetirevePassword: function () {

    }
  }
}
</script>

<style scoped>

</style>
